<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时天气面板</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/weather-icons@2.0.10/css/weather-icons.min.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E88E5',
                        secondary: '#64B5F6',
                        dark: '#121212',
                        light: '#E3F2FD',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .rain-animation {
                background-size: cover;
                position: relative;
                overflow: hidden;
            }
            .rain-drop {
                position: absolute;
                background-color: rgba(255,255,255,0.5);
                width: 1px;
                animation: rain 0.5s linear infinite;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(30, 136, 229, 0.4);
            }
            .loading-shimmer {
                background: linear-gradient(90deg, #2d2d2d 25%, #3d3d3d 50%, #2d2d2d 75%);
                background-size: 200% 100%;
                animation: shimmer 1.5s infinite;
            }
            @keyframes rain {
                0% { top: -10%; }
                100% { top: 100%; opacity: 0; }
            }
            @keyframes shimmer {
                0% { background-position: 200% 0; }
                100% { background-position: -200% 0; }
            }
        }
    </style>
</head>
<body class="bg-dark text-light min-h-screen">
<!-- 顶部导航栏 - 优化输入区域位置和响应式布局 -->
<nav class="bg-dark/80 backdrop-blur-md fixed top-0 left-0 right-0 z-50 border-b border-primary/30">
    <div class="container mx-auto px-4 py-3">
        <!-- 调整为三层布局：标题、输入区、更新时间 -->
        <div class="flex flex-col gap-3">
            <!-- 标题区域 - 顶部居中显示 -->
            <div class="flex justify-center md:justify-start items-center gap-2">
                <i class="wi wi-umbrella text-primary text-2xl"></i>
                <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                    实时天气面板
                </h1>
            </div>

            <!-- 输入区域 - 中间位置，优先展示 -->
            <div class="w-full flex flex-wrap gap-2 items-center justify-center md:justify-between">
                <div class="flex flex-wrap gap-2 w-full md:w-auto justify-center">
                    <div class="relative w-full md:w-36">
                        <input type="text" id="ipInput" placeholder="IP地址（可选）"
                               class="bg-dark/60 border border-primary/30 rounded-lg px-3 py-1.5 text-sm w-full focus:outline-none focus:border-primary">
                    </div>
                    <div class="relative w-full md:w-28">
                        <input type="text" id="provinceInput" placeholder="省份"
                               class="bg-dark/60 border border-primary/30 rounded-lg px-3 py-1.5 text-sm w-full focus:outline-none focus:border-primary">
                    </div>
                    <div class="relative w-full md:w-28">
                        <input type="text" id="cityInput" placeholder="城市"
                               class="bg-dark/60 border border-primary/30 rounded-lg px-3 py-1.5 text-sm w-full focus:outline-none focus:border-primary">
                    </div>
                    <button id="queryBtn" class="bg-primary hover:bg-primary/80 text-white px-4 py-1.5 rounded-lg text-sm transition-colors">
                        查询天气
                    </button>
                </div>
            </div>

            <!-- 更新时间 - 底部右侧显示 -->
            <div class="text-sm text-gray-400 w-full text-right">
                数据更新时间: <span id="updateTime" class="text-light">未查询</span>
            </div>
        </div>
    </div>
</nav>

<!-- 加载状态 - 居中显示，不遮挡输入区（初始隐藏） -->
<div id="loading" class="hidden fixed inset-0 bg-dark/80 z-50 flex items-center justify-center">
    <div class="text-center">
        <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto"></div>
        <p class="mt-4 text-xl text-primary">正在获取天气数据...</p>
    </div>
</div>

<!-- 错误提示 - 居中显示 -->
<div id="error" class="hidden fixed inset-0 bg-dark/80 z-50 flex items-center justify-center p-4">
    <div class="bg-dark border border-red-500 rounded-xl p-6 max-w-md w-full">
        <div class="text-red-500 text-center mb-4">
            <i class="wi wi-exclamation-triangle text-4xl"></i>
        </div>
        <h3 class="text-xl font-bold text-center text-red-400 mb-2">数据获取失败</h3>
        <p class="text-gray-400 text-center mb-4" id="errorMessage">无法连接到服务器，请稍后重试</p>
        <button id="retryBtn" class="w-full bg-primary hover:bg-primary/80 text-white py-2 rounded-lg transition-colors">
            重试
        </button>
    </div>
</div>

<!-- 主内容区 - 调整顶部间距，确保不被导航栏遮挡 -->
<main class="container mx-auto px-4 pt-40 pb-10 opacity-0 transition-opacity duration-500" id="mainContent">
    <!-- 1. 城市与核心天气概览 - 顶部突出显示 -->
    <section class="mb-8">
        <div class="rain-animation rounded-2xl p-6 md:p-8 relative" id="weatherHero">
            <div id="rainContainer" class="absolute inset-0 opacity-30"></div>

            <div class="relative z-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 城市信息 - 左侧顶部 -->
                <div class="col-span-1">
                    <h2 class="text-3xl md:text-4xl font-bold">
                        <span id="city">加载中</span>
                        <span class="text-gray-400 text-lg md:text-xl ml-2" id="dateWeek">加载中</span>
                    </h2>
                    <div class="mt-4 text-gray-300">
                        <p><i class="wi wi-sunrise text-secondary mr-2"></i> 日出: <span id="sunrise">--:--</span></p>
                        <p class="mt-2"><i class="wi wi-sunset text-secondary mr-2"></i> 日落: <span id="sunset">--:--</span></p>
                    </div>
                </div>

                <!-- 核心天气指标 - 中间突出显示 -->
                <div class="col-span-1 flex flex-col items-center justify-center">
                    <div class="flex items-center gap-4">
                        <i class="wi wi-rain text-6xl md:text-8xl text-primary" id="weatherIcon"></i>
                        <div>
                            <p id="wea" class="text-2xl md:text-3xl font-semibold">加载中</p>
                            <p class="text-gray-400" id="dayNightWea">白天/夜间: 加载中/加载中</p>
                        </div>
                    </div>
                    <div class="mt-6 text-5xl md:text-7xl font-bold">
                        <span id="tem">--.-</span>°C
                    </div>
                    <div class="mt-2 text-gray-300">
                        今日区间: <span id="temRange">--°C - --°C</span>
                    </div>
                </div>

                <!-- 辅助天气数据 - 右侧紧凑排列 -->
                <div class="col-span-1 grid grid-cols-2 gap-4">
                    <div class="bg-dark/50 backdrop-blur-sm rounded-lg p-4 card-hover">
                        <p class="text-gray-400 text-sm">风向风力</p>
                        <p class="text-xl font-semibold mt-1">
                            <i class="wi wi-wind text-secondary mr-1"></i>
                            <span id="winSpeed">加载中</span>
                        </p>
                        <p class="text-gray-400 text-xs mt-1">风速: <span id="winMeter">--km/h</span></p>
                    </div>
                    <div class="bg-dark/50 backdrop-blur-sm rounded-lg p-4 card-hover">
                        <p class="text-gray-400 text-sm">湿度</p>
                        <p class="text-xl font-semibold mt-1">
                            <i class="wi wi-humidity text-secondary mr-1"></i>
                            <span id="humidity">--%</span>
                        </p>
                    </div>
                    <div class="bg-dark/50 backdrop-blur-sm rounded-lg p-4 card-hover">
                        <p class="text-gray-400 text-sm">降水量</p>
                        <p class="text-xl font-semibold mt-1">
                            <i class="wi wi-raindrop text-secondary mr-1"></i>
                            <span id="rainPcpn">--.-mm</span>
                        </p>
                    </div>
                    <div class="bg-dark/50 backdrop-blur-sm rounded-lg p-4 card-hover">
                        <p class="text-gray-400 text-sm">能见度</p>
                        <p class="text-xl font-semibold mt-1">
                            <i class="wi wi-eye text-secondary mr-1"></i>
                            <span id="visibility">--km</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 2. 24小时逐时预报 - 中间位置，横向滚动 -->
    <section class="mb-8">
        <div class="bg-dark/50 backdrop-blur-sm rounded-2xl p-6 border border-primary/20">
            <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="wi wi-clock-o text-primary mr-2"></i>
                24小时逐时预报
            </h3>
            <div class="overflow-x-auto pb-4">
                <div class="flex gap-4 min-w-max" id="hoursForecast">
                    <!-- 逐时数据由JS动态生成 -->
                </div>
            </div>
        </div>
    </section>

    <!-- 3. 空气质量与生活建议 - 底部并排显示 -->
    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 空气质量 - 左侧 -->
        <div class="bg-dark/50 backdrop-blur-sm rounded-2xl p-6 border border-primary/20">
            <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="wi wi-air text-primary mr-2"></i>
                空气质量
            </h3>
            <div class="grid grid-cols-2 gap-6">
                <div>
                    <div class="flex items-end gap-3">
                        <div class="text-5xl font-bold" id="airAqi">--</div>
                        <div class="text-xl font-semibold" id="airLevel">加载中</div>
                    </div>
                    <p class="text-gray-400 mt-2" id="airTips">加载中...</p>
                    <div class="mt-4 grid grid-cols-2 gap-2 text-sm">
                        <div class="bg-dark/60 rounded p-2">
                            <p class="text-gray-400">PM2.5</p>
                            <p class="text-light font-medium" id="airPm25">-- μg/m³</p>
                        </div>
                        <div class="bg-dark/60 rounded p-2">
                            <p class="text-gray-400">PM10</p>
                            <p class="text-light font-medium" id="airPm10">-- μg/m³</p>
                        </div>
                        <div class="bg-dark/60 rounded p-2">
                            <p class="text-gray-400">NO₂</p>
                            <p class="text-light font-medium" id="airNo2">-- μg/m³</p>
                        </div>
                        <div class="bg-dark/60 rounded p-2">
                            <p class="text-gray-400">SO₂</p>
                            <p class="text-light font-medium" id="airSo2">-- μg/m³</p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col justify-center">
                    <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
                        <div id="aqiProgress" class="h-full bg-gradient-to-r from-green-400 to-primary" style="width: 0%"></div>
                    </div>
                    <div class="w-full flex justify-between text-xs text-gray-400 mt-1">
                        <span>0</span>
                        <span>50</span>
                        <span>100</span>
                        <span>150</span>
                        <span>200</span>
                        <span>300+</span>
                    </div>
                    <div class="w-full flex justify-between text-xs text-gray-400 mt-1">
                        <span>优</span>
                        <span>良</span>
                        <span>轻度</span>
                        <span>中度</span>
                        <span>重度</span>
                        <span>严重</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 生活建议 - 右侧 -->
        <div class="bg-dark/50 backdrop-blur-sm rounded-2xl p-6 border border-primary/20">
            <h3 class="text-xl font-bold mb-4 flex items-center">
                <i class="wi wi-lightbulb-o text-primary mr-2"></i>
                生活建议
            </h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-dark/60 rounded-lg p-4 card-hover">
                    <p class="text-gray-400 text-sm">外出建议</p>
                    <p class="text-lg font-semibold mt-2" id="lifeOutdoor">加载中</p>
                    <p class="text-gray-400 text-xs mt-1" id="lifeOutdoorTips">--</p>
                </div>
                <div class="bg-dark/60 rounded-lg p-4 card-hover">
                    <p class="text-gray-400 text-sm">口罩佩戴</p>
                    <p class="text-lg font-semibold mt-2" id="lifeMask">加载中</p>
                </div>
                <div class="bg-dark/60 rounded-lg p-4 card-hover">
                    <p class="text-gray-400 text-sm">开窗通风</p>
                    <p class="text-lg font-semibold mt-2" id="lifeWindow">加载中</p>
                </div>
                <div class="bg-dark/60 rounded-lg p-4 card-hover">
                    <p class="text-gray-400 text-sm">运动建议</p>
                    <p class="text-lg font-semibold mt-2" id="lifeSports">加载中</p>
                    <p class="text-gray-400 text-xs mt-1" id="lifeSportsTips">--</p>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 底部信息 - 页面最底部 -->
<footer class="bg-dark/80 backdrop-blur-md border-t border-primary/30 py-4 mt-auto">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>数据来源: localhost:8080/weather/real/time | 订单号: <span id="orderNo">未查询</span></p>
        <p class="mt-1">© 2025 炫酷天气面板 | 实时天气查询</p>
    </div>
</footer>

<script>
    // DOM元素引用
    const loadingEl = document.getElementById('loading');
    const errorEl = document.getElementById('error');
    const errorMessageEl = document.getElementById('errorMessage');
    const mainContentEl = document.getElementById('mainContent');
    const retryBtn = document.getElementById('retryBtn');
    const queryBtn = document.getElementById('queryBtn');
    const weatherHeroEl = document.getElementById('weatherHero');
    const ipInput = document.getElementById('ipInput');
    const provinceInput = document.getElementById('provinceInput');
    const cityInput = document.getElementById('cityInput');

    const API_URL = 'http://192.168.34.100:8080/weather/real/time';

    // 初始化：确保输入区域可见且可交互
    document.addEventListener('DOMContentLoaded', () => {
        // 自动获取IP（仅填充不查询）
        fetch('https://api.ipify.org?format=json')
            .then(res => res.json())
            .then(data => {
                ipInput.value = data.ip;
            })
            .catch(() => {
                console.log('自动获取IP失败，可手动输入');
            });

        // 绑定事件
        queryBtn.addEventListener('click', fetchWeatherData);
        retryBtn.addEventListener('click', fetchWeatherData);
        [ipInput, provinceInput, cityInput].forEach(input => {
            input.addEventListener('keyup', (e) => {
                if (e.key === 'Enter') fetchWeatherData();
            });
        });

        // 初始状态：隐藏加载和内容，显示输入区
        loadingEl.classList.add('hidden');
        mainContentEl.classList.add('opacity-0');
        errorEl.classList.add('hidden');
    });

    // 获取天气数据（带超时控制）
    async function fetchWeatherData() {
        const province = provinceInput.value.trim();
        const city = cityInput.value.trim();
        if (!province || !city) {
            errorMessageEl.textContent = '请输入省份和城市信息';
            errorEl.classList.remove('hidden');
            return;
        }

        // 超时控制（5秒）
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000);

        try {
            loadingEl.classList.remove('hidden');
            errorEl.classList.add('hidden');
            mainContentEl.classList.add('opacity-0');

            // 构建请求参数
            const params = new URLSearchParams();
            if (ipInput.value.trim()) params.append('ip', ipInput.value.trim());
            params.append('province', province);
            params.append('city', city);
            const requestUrl = `${API_URL}?${params.toString()}`;

            const response = await fetch(requestUrl, { signal: controller.signal });

            if (!response.ok) {
                throw new Error(`服务器错误: ${response.status}`);
            }

            const weatherData = await response.json();

            if (!weatherData.success || !weatherData.data || !weatherData.data.data) {
                throw new Error('数据格式不正确');
            }

            renderWeatherData(weatherData);
            loadingEl.classList.add('hidden');
            setTimeout(() => {
                mainContentEl.classList.remove('opacity-0');
            }, 100);

        } catch (error) {
            console.error('获取天气数据失败:', error);
            loadingEl.classList.add('hidden'); // 确保加载状态关闭
            errorMessageEl.textContent = error.name === 'AbortError'
                ? '请求超时，请检查网络'
                : error.message || '无法获取天气数据，请重试';
            errorEl.classList.remove('hidden');
        } finally {
            clearTimeout(timeoutId);
        }
    }

    // 渲染天气数据
    function renderWeatherData(weatherData) {
        const coreData = weatherData.data.data;
        const aqiData = coreData.aqi || {};

        // 设置背景图
        setWeatherBackground(coreData.wea_img);

        // 基础信息
        document.getElementById('city').textContent = coreData.city || '未知城市';
        document.getElementById('dateWeek').textContent = `${coreData.date || ''} ${coreData.week || ''}`;
        document.getElementById('updateTime').textContent = coreData.update_time || '未知';
        document.getElementById('orderNo').textContent = weatherData.data.orderNo || '未知';

        // 核心天气
        document.getElementById('wea').textContent = coreData.wea || '未知';
        document.getElementById('dayNightWea').textContent = `白天/夜间: ${coreData.wea_day || '未知'}/${coreData.wea_night || '未知'}`;
        document.getElementById('tem').textContent = coreData.tem || '--.-';
        document.getElementById('temRange').textContent = `${coreData.tem2 || '--'}°C - ${coreData.tem1 || '--'}°C`;
        document.getElementById('sunrise').textContent = coreData.sunrise || '--:--';
        document.getElementById('sunset').textContent = coreData.sunset || '--:--';
        document.getElementById('winSpeed').textContent = `${coreData.win || '未知'} ${coreData.win_speed || '--级'}`;
        document.getElementById('winMeter').textContent = coreData.win_meter || '--km/h';
        document.getElementById('humidity').textContent = coreData.humidity || '--%';
        document.getElementById('rainPcpn').textContent = `${coreData.rain_pcpn || '--.'}mm`;
        document.getElementById('visibility').textContent = coreData.visibility || '--km';

        // 天气图标
        setWeatherIcon(coreData.wea_img);

        // 空气质量
        const airAqi = coreData.air || '--';
        document.getElementById('airAqi').textContent = airAqi;
        document.getElementById('airLevel').textContent = coreData.air_level || '未知';
        document.getElementById('airTips').textContent = coreData.air_tips || '暂无数据';
        document.getElementById('airPm25').textContent = `${coreData.air_pm25 || '--'} μg/m³`;
        document.getElementById('airPm10').textContent = `${aqiData.pm10 || '--'} μg/m³`;
        document.getElementById('airNo2').textContent = `${aqiData.no2 || '--'} μg/m³`;
        document.getElementById('airSo2').textContent = `${aqiData.so2 || '--'} μg/m³`;
        setAqiStyles(airAqi);

        // 生活建议
        document.getElementById('lifeOutdoor').textContent = aqiData.waichu || '暂无建议';
        document.getElementById('lifeOutdoorTips').textContent = coreData.wea === '中雨' ? '但需携带雨具' : '';
        document.getElementById('lifeMask').textContent = aqiData.kouzhao || '暂无建议';
        document.getElementById('lifeWindow').textContent = aqiData.kaichuang || '暂无建议';
        document.getElementById('lifeSports').textContent = aqiData.yundong || '暂无建议';
        document.getElementById('lifeSportsTips').textContent = coreData.wea === '中雨' ? '建议室内运动' : '';

        // 逐时预报
        renderHourlyForecast(coreData.hours || []);

        // 下雨效果
        if (coreData.wea_img === 'yu') {
            createRainDrops();
        } else {
            document.getElementById('rainContainer').innerHTML = '';
        }
    }

    // 渲染逐时预报
    function renderHourlyForecast(hours) {
        const hoursContainer = document.getElementById('hoursForecast');
        hoursContainer.innerHTML = '';

        if (hours.length === 0) {
            hoursContainer.innerHTML = '<div class="text-gray-400 px-4 py-8">暂无逐时预报数据</div>';
            return;
        }

        hours.forEach(hour => {
            let weatherIcon = 'wi-na';
            if (hour.wea_img === 'yu') weatherIcon = 'wi-rain';
            if (hour.wea_img === 'wu') weatherIcon = 'wi-fog';
            if (hour.wea_img === 'yun') weatherIcon = 'wi-cloud';
            if (hour.wea_img === 'qing') weatherIcon = 'wi-day-sunny';
            if (hour.wea_img === 'xue') weatherIcon = 'wi-snow';

            const hourCard = document.createElement('div');
            hourCard.className = 'bg-dark/60 backdrop-blur-sm rounded-lg p-4 w-24 text-center card-hover';
            hourCard.innerHTML = `
                    <p class="font-medium">${hour.hours || ''}</p>
                    <i class="wi ${weatherIcon} text-primary text-2xl my-3"></i>
                    <p class="text-sm">${hour.wea || ''}</p>
                    <p class="text-lg font-bold mt-2">${hour.tem || '--'}°C</p>
                    <p class="text-xs text-gray-400 mt-1">${hour.win || ''} ${hour.win_speed || ''}</p>
                `;
            hoursContainer.appendChild(hourCard);
        });
    }

    // 设置天气图标
    function setWeatherIcon(weatherImg) {
        const iconEl = document.getElementById('weatherIcon');
        let iconClass = 'wi-na';

        if (weatherImg === 'yu') iconClass = 'wi-rain';
        else if (weatherImg === 'wu') iconClass = 'wi-fog';
        else if (weatherImg === 'yun') iconClass = 'wi-cloud';
        else if (weatherImg === 'qing') iconClass = 'wi-day-sunny';
        else if (weatherImg === 'xue') iconClass = 'wi-snow';

        iconEl.className = iconEl.className.replace(/wi-\w+/g, '');
        iconEl.classList.add('wi', iconClass, 'text-6xl', 'md:text-8xl', 'text-primary');
    }

    // 设置天气背景
    function setWeatherBackground(weatherImg) {
        let backgroundUrl = 'https://picsum.photos/id/1059/1920/1080';

        if (weatherImg === 'yu') backgroundUrl = 'https://picsum.photos/id/1063/1920/1080';
        else if (weatherImg === 'wu') backgroundUrl = 'https://picsum.photos/id/1047/1920/1080';
        else if (weatherImg === 'yun') backgroundUrl = 'https://picsum.photos/id/1048/1920/1080';
        else if (weatherImg === 'qing') backgroundUrl = 'https://picsum.photos/id/1015/1920/1080';
        else if (weatherImg === 'xue') backgroundUrl = 'https://picsum.photos/id/1039/1920/1080';

        weatherHeroEl.style.backgroundImage = `url('${backgroundUrl}')`;
    }

    // 设置AQI样式
    function setAqiStyles(aqiValue) {
        const aqiNum = parseInt(aqiValue, 10) || 0;
        const aqiProgressEl = document.getElementById('aqiProgress');
        const airAqiEl = document.getElementById('airAqi');
        const airLevelEl = document.getElementById('airLevel');

        const progressWidth = Math.min(100, aqiNum);
        aqiProgressEl.style.width = `${progressWidth}%`;

        let colorClass = 'text-green-400';
        let gradientClass = 'from-green-400 to-primary';

        if (aqiNum > 150) {
            colorClass = 'text-orange-500';
            gradientClass = 'from-orange-500 to-red-500';
        } else if (aqiNum > 100) {
            colorClass = 'text-yellow-500';
            gradientClass = 'from-yellow-500 to-orange-500';
        } else if (aqiNum > 50) {
            colorClass = 'text-blue-400';
            gradientClass = 'from-blue-400 to-green-400';
        }

        airAqiEl.className = `text-5xl font-bold ${colorClass}`;
        airLevelEl.className = `text-xl font-semibold ${colorClass}`;
        aqiProgressEl.className = `h-full bg-gradient-to-r ${gradientClass}`;
    }

    // 下雨效果
    function createRainDrops() {
        const rainContainer = document.getElementById('rainContainer');
        const containerWidth = rainContainer.offsetWidth;
        const containerHeight = rainContainer.offsetHeight;

        rainContainer.innerHTML = '';
        const dropCount = Math.floor(containerWidth / 5);

        for (let i = 0; i < dropCount; i++) {
            const drop = document.createElement('div');
            drop.className = 'rain-drop';

            const left = Math.random() * containerWidth;
            const height = 10 + Math.random() * 20;
            const delay = Math.random() * 2;
            const duration = 0.3 + Math.random() * 0.7;

            drop.style.left = `${left}px`;
            drop.style.height = `${height}px`;
            drop.style.animationDelay = `${delay}s`;
            drop.style.animationDuration = `${duration}s`;

            rainContainer.appendChild(drop);
        }
    }

    window.addEventListener('resize', () => {
        const coreData = document.getElementById('wea').textContent;
        if (coreData.includes('雨')) {
            createRainDrops();
        }
    });
</script>
</body>
</html>